<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="myDiv">
   按姓名模糊查找： <input type="text" v-model="name">  <input type="button" value="按员工姓名升序排列"  v-on:click="paiXun">
<input type="button" value="foreach" @click="foreach">
    <table border="1">
        <tr>
            <td>员工编号</td>
            <td>员工姓名</td>
            <td>员工岗位</td>
            <td>员工工资</td>
            <td>员工爱好</td>
            <td>操作</td>
        </tr>
        <tr v-for="emp in empListQuery">
            <td >{{emp.empno}}</td>
            <td>{{emp.ename}}</td>
            <td>{{emp.job}}</td>
            <td style="color: aquamarine" v-if="emp.sal>5000">
                {{emp.sal}}
            </td>
            <td style="color: red" v-else>
                {{emp.sal}}
            </td>
            <td>
                <input type="checkbox"  value="玩游戏" v-model="emp.hobby">
                <label>玩游戏</label>
                <input type="checkbox"  value="看书" v-model="emp.hobby">
                <label>看书</label>
                <input type="checkbox"  value="游泳" v-model="emp.hobby">
                <label>游泳</label>
            </td>
            <td>
                <input type="button" value="删除" v-on:click="deleteRow(emp.empno)">
            </td>
        </tr>
    </table>


    <div>
        员工编号： <input type="text"  v-model="empno"><br/>
        员工姓名： <input type="text" v-model="emp.ename"><br/>
        员工岗位： <input type="text" v-model="emp.job"><br/>
        员工工资： <input type="text" v-model="sal"><br/>
        爱好列表： <input type="checkbox" v-model="emp.hobby" value="玩游戏" >
                  <label>玩游戏</label>
                  <input type="checkbox" v-model="emp.hobby" value="看书" >
                  <label>看书</label>
                  <input type="checkbox" v-model="emp.hobby" value="游泳" >
                  <label>游泳</label>
        <br/>
                  <input type="button" value="确认" v-on:click="addRow()">
    </div>

</div>

</body>
</html>
<script src="/js/vue.js"></script>
<script>

  //   3.  在当前页面中添加一个表单，表单中包员工编号，姓名，岗位，工资和爱好列表  其中  编号，岗位，工资，姓名 工资为文本框，爱好为三个复选框（分别表示玩游戏，看书，游泳）
  // 要求 表单数据录入完成点击确定按钮后，将录入完成的表单数据添加到empList中

  // 4.在表格最后一列添加删除按钮，要求点击删除按钮时，将当前行的数据从界面中移除（移除empList中对应数据，界面会同步更新）
    let vm=new Vue({
        el:"#myDiv",
        data:{
            sal:"",
            empno:"",
            name:"",
            emp:{ename:"",job:"",hobby:[]},
            empList:[
                {empno:7788,ename:'scott',job:'clark',sal:4444,hobby:['玩游戏','看书']},
                {empno:3333,ename:'s1',job:'clark',sal:7777,hobby:['游泳','看书']},
                {empno:4444,ename:'s2',job:'Accouting',sal:888,hobby:['玩游戏','看书']},
                {empno:5555,ename:'s3',job:'clark',sal:6666,hobby:['玩游戏','看书']},
                {empno:6666,ename:'s4',job:'clark',sal:3333,hobby:['玩游戏','看书']},
                {empno:7777,ename:'s5',job:'clark',sal:5555,hobby:['玩游戏','看书']},
            ]
        },
        methods:{
            addRow:function(){
                for (let i=0;i<this.empList.length;i++){
                    if (this.empList[i].empno==this.empno){
                        alert("该员工编号已经存在");
                        return;
                    }
                }
                this.empList.push({empno:this.empno,ename:this.emp.ename,job:this.emp.job,sal:this.sal,hobby:this.emp.hobby});
                this.empno="";
                this.emp.ename="";
                this.emp.job="";
                this.sal="";
                this.emp.hobby="";
                },

            deleteRow:function (empno) {
                for (let i=0;i<this.empList.length;i++){
                    if (this.empList[i].empno==empno){
                        this.empList.splice(i,1);
                    }
                }
            },
            paiXun:function () {
                // for(let i=0;i<this.empList.length-1;i++ ){
                //     for (let j=0;j<this.empList.length-1-i;j++){
                //         if (this.empList[j].ename>this.empList[j+1].ename){
                //             let temp = this.empList[j];
                //             // this.empList[j] =this.empList[j + 1];
                //             // this. empList[j + 1] = temp;
                //             this.empList.splice(j, 1, this.empList[j + 1]);
                //             // console.log(this.empList);
                //             this. empList.splice(j + 1, 1, temp);
                //             // console.log(this.empList);
                //         }
                //     }
                // }
                this.empList.sort(function (a, b) {
                    return a.ename.localeCompare(b.ename);
                })
            },
            foreach:function () {
                // this.empList.forEach(function (value) {
                //        console.log(value);
                // })
                this.empList.forEach(value=>{
                    console.log(value);
                })
            }

        },
        watch:{
                sal:function(newVal,oldVal) {
                    // if (oldVal==undefined){
                    //     alert("lll")
                    // }
                  let regex = /^[0-9]+$/;
                  if (regex.test(newVal)||newVal==''){
                  }else {
                      this.sal=oldVal;
                  }
                  //
                  // if (regex.test(newVal)&&regex.test(oldVal)){
                  //     this.sal=newVal;
                  // }  else {
                  //     this.sal = oldVal;
                  // }
                },
            empno:function (newVal) {
                for (let i=0;i<this.empList.length;i++){

                    if (this.empList[i].empno==newVal) {
                        alert("该员工编号已经存在");
                    }
                }
            }
       },
        computed: {
            empListQuery: function () {
                if (this.name == "") {
                    return this.empList;
                } else {
                    let empListQueryLike = [];
                    for (let i = 0; i < this.empList.length; i++) {
                        if (this.empList[i].ename.indexOf(this.name) != -1) {
                            empListQueryLike.push(this.empList[i]);
                        }
                    }
                    return empListQueryLike;
                }
            }
        }
    })

</script>